<template>

	<view class="qiangdanchenggong">
		<view class="titile">
			{{option.type == 'zm' ? '选择成功' :'发布成功'}}
		</view>
		<view class="primary f24 mt32 tac">
			请尽快和师傅沟通，进行业主服务
		</view>
		<view class="" v-if="option.type == 'zm'" style="margin-top: 60rpx;">
			<!-- 商品选择 -->
			<view class="forbox bac wanl-cart-goods u-flex-col padding-bj" style="align-items: stretch;">

				<view class="flex_ac">
					<u-icon v-if='data.level == 3' name="https://img.aibbyp.com/wechatUser/jiazhuang.png"
						size="60"></u-icon>
					<u-icon v-if='data.level == 2' name="https://img.aibbyp.com/wechatUser/gongzhuang.png"
						size="60"></u-icon>
					<view class="f32 fb ml12">
						{{data.worker_type_text.name}}
					</view>
					<u-tag v-if='data.type == 1' class="ml12" text="整装" size="mini" mode="plain" />
					<u-tag v-if='data.type == 2' class="ml12" text="局部改造" size="mini" mode="plain" />
					<u-tag v-if='data.type == 3' class="ml12" text="维修" size="mini" mode="plain" />

					<view class="cf64 flex1 tar f28 fb">
						<!-- 工匠价格 -->
						总价：￥{{data.price}}
					</view>
				</view>

				<view class="flex mt24 c3d f28 ">
					<image class="br12" style="width: 180rpx;height: 180rpx;" v-if="data.images &&data.images[0]"
						:src="$wanlshop.oss(data.images[0])" mode="">
					</image>
					<view class="ml24 flex1 minwidth f24">
						<view class="flex ">
							<view class="tags">
								{{data.number}}人
							</view>
							<view class="tags">
								{{data.worker_area}}
							</view>
						</view>

						<view class="mt12 overflow_1">
							<u-icon name="map" color="#FD5241" size="28"></u-icon>
							<text class="ml16 f28 c3d">
								{{data.address}}
							</text>
						</view>
						<view class="mt12">
							<u-icon name="clock" color="#FD5241" size="28"></u-icon>
							<text class="ml16 f28 c3d">
								{{data.start_date_text}} ~ {{data.end_date_text}}
							</text>
						</view>
					</view>
				</view>


			</view>
			<view class="f24 fb mt24 bac mt12">


				<view class="" v-for="item1 in data.workers" :key="item1.id">
					<view class="forbox mt12 mb24 wanl-cart-goods u-flex-col " style="align-items: stretch;">
						<view class="flex_ac">
							<image
								@tap="$wanlshop.to('/pages/craftsman/craftsmanHomepage?company=1&id=' + item1.user_id)"
								style="width: 108rpx;height: 108rpx;" class="br100"
								:src="$wanlshop.oss(item1.user_worker.avatar)" mode=""></image>
							<view class="flex1 ml24 minwidth overflow_1">
								<view class="f32 overflow_1 fb">
									{{item1.user_worker.name}}
									<u-tag class="ml12" v-if="item1.order!=0" :text="`合作${item1.order}次`"
										size="mini" mode="light" type="error" />
								</view>
								<view class="mt8 flex overflow_1">
									<u-tag class="mr12" :text="item1.user_worker.work_time + '年'" size="mini"
										mode="dark" type="warning" />
									<u-tag class="" v-if="item1.company" :text="item1.company" size="mini" mode="light"
										shape="" />
								</view>
							</view>
							<view class=""
								@click="$wanlshop.to('/pages/craftsman/craftsmanHomepage?id=' + item1.user_id)">
								<text class="cf64"> ￥ <text class="fb f32">{{data.price}}</text></text>
								<view class="info">
									进入主页 <u-icon name="arrow-right"></u-icon>
								</view>
							</view>
						</view>

					</view>

				</view>

			</view>

		</view>
		<view class=" mt48" else>
			<block v-if="data.length > 0">
				<view class="u-p-t-32 bac mb24" v-for="(goods, index) in data" :key="index">
					<!-- 商品选择 -->
					<view class="forbox wanl-cart-goods u-flex-col padding-bj" style="align-items: stretch;">

						<view class="flex_ac">
							<u-icon v-if='goods.level == 3' name="https://img.aibbyp.com/wechatUser/jiazhuang.png"
								size="60"></u-icon>
							<u-icon v-if='goods.level == 2' name="https://img.aibbyp.com/wechatUser/gongzhuang.png"
								size="60"></u-icon>
							<view class="f32 fb ml12">
								{{goods.worker_type_text.name}}
							</view>
							<u-tag v-if='goods.type == 1' class="ml12" text="整装" size="mini" mode="plain" />
							<u-tag v-if='goods.type == 2' class="ml12" text="局部改造" size="mini" mode="plain" />
							<u-tag v-if='goods.type == 3' class="ml12" text="维修" size="mini" mode="plain" />
							<view class="cf64 flex1 tar f28 fb">
								<!-- 工匠价格 -->
								招募中
							</view>
						</view>

						<view class="flex mt24 c3d f28 ">
							<image v-if="goods.images &&goods.images[0]" class="goodsimg"
								:src="$wanlshop.oss(goods.images[0])" mode="">
							</image>
							<view class="ml24 flex1 minwidth f24">
								<scroll-view scroll-x="true" class="scroll-Y">
									<view class="flex">
										<view class="tags" v-for="(item,key) in goods.label" :key="key">
											{{item}}
										</view>
									</view>
								</scroll-view>
								<view class="mt12 overflow_1">
									<u-icon name="map" color="#FD5241" size="28"></u-icon>
									<text class="ml16 f28 c3d">
										{{goods.address}}
									</text>
								</view>
								<view class="mt12">
									<u-icon name="clock" color="#FD5241" size="28"></u-icon>
									<text class="ml16 f28 c3d">
										{{goods.start_date_text}} ~ {{goods.end_date_text}}
									</text>
								</view>
							</view>
						</view>
						<view class="flex_sb mt24 flex_ac">
							<view class="mt8">

								<view class="cf64 fb f32">
									总价：￥{{goods.price}}
								</view>
							</view>
							<view class="">

								<u-button class="ml12" type="info" size="mini" shape="circle" plain
									@click.stop="quxiao(goods,index)">取消</u-button>
								<u-button class="ml12" type="primary" size="mini" shape="circle" plain
									@click.stop="chakan(goods, index)">查看招募</u-button>
							</view>
						</view>

					</view>
				</view>
			</block>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				data: [],
				data1: {},
				order_ids: [],
				option: ''
			}
		},

		onLoad(option) {
			if (option.type == 'zm') { //招募成功
				this.option = option
				this.recruitGetData()
			} else { // 发布成功
				this.order_ids = option.order_ids.split(',')
				this.orderDetail(option.order_ids.split(','))
			}
		},
		methods: {
			recruitGetData(id) {
				this.$api.post({
					url: '/worker/recruit/recruitDetail',
					data: {
						id: this.option.id
					},
				}).then(res => {
					this.data = res
				})
			},
			chakan(data, index) {
				this.$wanlshop.to('/pages/craftsman/list2recruit?id=' + data.id)
			},
			quxiao(data, index) {
				this.$api.post({
					url: '/worker/recruit/cancelRecruit',
					data: {
						id: data.id
					},

				}).then(res => {
					this.orderDetail(this.order_ids)
					this.$wanlshop.msg('操作成功')
				})
			},
			orderDetail(id) {
				this.$api.post({
					url: '/worker/recruit/getRecruitNowList',
					data: {
						order_ids: id
					},
				}).then(res => {
					console.log(res);
					this.data = res
				})
			},



		},
	}
</script>

<style lang="scss" scoped>
	.qiangdanchenggong {
		background-image: url('https://img.aibbyp.com/wechatUser/craftsman/ssad.png');
		background-size: 100% 1042rpx;
		background-repeat: no-repeat;
		padding: 20rpx 30rpx;
		padding-top: 50rpx;

		.goodsimg {
			width: 104rpx;
			height: 104rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}

		.tags {
			background: #E9F0FC;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 4rpx 10rpx;
			margin-right: 8rpx;
			font-size: 20rpx;
			margin-bottom: 8rpx;
			white-space: nowrap;
		}

		.goodsimg {
			width: 180rpx;
			height: 180rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}

		.mt48 {
			margin-top: 48rpx;
		}

		.bac {
			padding: 20rpx 30rpx;
			border-radius: 20rpx;
			background: #fff;
		}

		.titile {
			font-size: 52rpx;
			color: #1A1A1A;
			text-align: center;
		}
	}
</style>